<template>
  <div class="left-board">
     <el-scrollbar class="left-scrollbar">
       <div class="components-list">
         <div v-for="(item, listIndex) in leftComponents" :key="listIndex" class="components-part">
           <div class="components-title">{{ item.title }}</div>
           <draggable class="components-draggable" :list="item.list"
             :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
             :clone="cloneComponent" draggable=".components-item" filter=".disabled" :sort="false"
             @end="onEnd">
             <div v-for="(element, index) in item.list" :key="index" class="components-item"
               :class="{'disabled':element.config.dragDisabled}"
               @click="addComponent(element)">
               <div class="components-body">
                 <i :class="element.config.tagIcon" />
                 {{ element.config.label }}
               </div>
             </div>
           </draggable>
         </div>
       </div>
     </el-scrollbar>
   </div>
</template>

<script>
import draggable from 'vuedraggable'
import { mapMutations } from 'vuex';
import { inputComponents, selectComponents, systemComponents, layoutComponents } from '../../../generator/config'
import { deepClone } from '../../../utils/formIndex'
import formDesignerMixin from '../../../mixins/formDesigner'
let tempActiveData
export default {
 mixins: [formDesignerMixin],
 data(){
   return{
     inputComponents,
     selectComponents,
     systemComponents,
     layoutComponents,
     leftComponents: [
     {
       title: '基础控件',
       list: inputComponents
     },
     {
       title: '高级控件',
       list: selectComponents
     },
     {
       title: '系统控件',
       list: systemComponents
     },
     {
       title: '布局控件',
       list: layoutComponents
     }
     ]
   }
 },
 methods:{
   ...mapMutations('designer',['setDrawingList','setActiveData','setActiveId']),
   addComponent(item) {
     if (item.config.dragDisabled) return
     const clone = this.cloneComponent(item)
     this.setDrawingList(clone)
     this.activeFormItem(clone)
   },
   
   onEnd(obj) {
     this.showTip = true
     if (obj.from !== obj.to) {
       this.setActiveData(tempActiveData)
       this.setActiveId(this.idGlobal)
     }
     if (obj.to.className.indexOf('table') > -1) {
       this.$set(this.activeItem.config, 'isSubTable', true)
       this.$set(this.activeItem.config, 'parentVModel', this.activeTableItem.vModel)
       if (this.$store.getters.hasTable) {
         this.$set(this.activeItem.config, 'relationTable', this.activeTableItem.config.tableName)
         this.activeItem.vModel = ''
       }
     }
   },
 },
 components:{
   draggable
 }
}
</script>

<style>

</style>